const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:"development",
    entry:"./src/index.ts", // 需要编译的文件ts
    output: {
        // // 编译之后放入的文件夹
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js" // 编译之后的文件名称
    },
    module:{
        rules :[{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },{
            // 设置less文件处理
            test: /\.less$/,
            // 插件执行顺序从下向上 less-loader -> css-loader -> style-loader
            use:[
                "style-loader",
                "css-loader",
                // 在less-loader之前引入postcss
                {
                    loader:"postcss-loader",
                    options:{
                        postcssOptions:{
                            plugins:[
                                [
                                    "postcss-preset-env",
                                    {
                                        browsers:'last 2 versions',
                                    }
                                ]
                            ]
                        }
                    }
                },
                "less-loader"
            ]
        }]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"贪吃蛇",
            template:"./src/template/index.html",
        })
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    }
}